```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringAI：从"人工智障"到"人工智能"的蜕变</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f9fafb;
            color: #1f2937;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-bg {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        }
        .code-block {
            background-color: #1e293b;
            color: #e2e8f0;
            border-radius: 0.5rem;
            position: relative;
        }
        .code-block pre {
            margin: 0;
            padding: 1.5rem;
            overflow-x: auto;
        }
        .code-block .code-lang {
            position: absolute;
            top: 0;
            right: 0;
            background-color: #334155;
            color: #94a3b8;
            padding: 0.25rem 0.75rem;
            border-radius: 0 0.5rem 0 0.5rem;
            font-size: 0.75rem;
        }
        .compare-table {
            width: 100%;
            border-collapse: collapse;
        }
        .compare-table th, .compare-table td {
            padding: 1rem;
            text-align: left;
            border: 1px solid #e5e7eb;
        }
        .compare-table th {
            background-color: #f3f4f6;
            font-weight: 600;
        }
        .compare-table tr:nth-child(even) {
            background-color: #f9fafb;
        }
        .feature-card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        .highlight-box {
            border-left: 4px solid #2563eb;
            background-color: #f8fafc;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">SpringAI：从"人工智障"到"人工智能"的蜕变</h1>
                    <p class="text-xl opacity-90 mb-8">告别传统规则引擎的局限，拥抱智能时代的客服体验</p>
                    <div class="flex space-x-4">
                        <a href="#intro" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition duration-300">
                            探索SpringAI <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                        <a href="#case-study" class="border-2 border-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">
                            查看案例 <i class="fas fa-laptop-code ml-2"></i>
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-4 -left-4 w-32 h-32 bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
                        <div class="absolute -bottom-4 -right-4 w-32 h-32 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
                        <div class="relative bg-white rounded-lg shadow-xl p-6 text-gray-800">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="mb-4">
                                <div class="flex mb-2">
                                    <div class="bg-gray-100 rounded-lg px-4 py-2 mr-2">用户：我要查订单！</div>
                                </div>
                                <div class="flex justify-end mb-2">
                                    <div class="bg-blue-100 rounded-lg px-4 py-2">传统客服：请先登录...</div>
                                </div>
                                <div class="flex mb-2">
                                    <div class="bg-gray-100 rounded-lg px-4 py-2 mr-2">用户：登录个屁！老子已经登录三次了！</div>
                                </div>
                                <div class="bg-green-100 border-l-4 border-green-500 rounded-lg px-4 py-2">
                                    <div class="text-green-800 font-medium">SpringAI客服：</div>
                                    <div>检测到您登录遇到问题，您的订单OD123456已发货，预计明天送达。需要帮您解决登录问题吗？</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="intro" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">SpringAI简介</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">SpringAI是什么？</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Spring官方推出的AI集成框架，为你的项目装上一个随时待命的"AI助手"</p>
            </div>

            <div class="grid md:grid-cols-2 gap-10 mb-20">
                <div>
                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-blue-100 p-3 rounded-lg mr-4">
                                <i class="fas fa-comment-dots text-blue-600 text-xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold">自然语言处理</h3>
                        </div>
                        <p class="text-gray-600">理解用户真实意图，告别关键词匹配的限制，实现95%以上的准确率。</p>
                    </div>

                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 p-3 rounded-lg mr-4">
                                <i class="fas fa-robot text-purple-600 text-xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold">内容生成</h3>
                        </div>
                        <p class="text-gray-600">自动生成文案、代码、文档等各类内容，大幅提升工作效率。</p>
                    </div>
                </div>

                <div>
                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-green-100 p-3 rounded-lg mr-4">
                                <i class="fas fa-chart-line text-green-600 text-xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold">智能决策</h3>
                        </div>
                        <p class="text-gray-600">基于数据分析给出合理建议，辅助业务决策更加精准。</p>
                    </div>

                    <div class="mb-8">
                        <div class="flex items-center mb-4">
                            <div class="bg-yellow-100 p-3 rounded-lg mr-4">
                                <i class="fas fa-random text-yellow-600 text-xl"></i>
                            </div>
                            <h3 class="text-2xl font-bold">多模型支持</h3>
                        </div>
                        <p class="text-gray-600">OpenAI、Azure、本地模型随意切换，灵活满足不同场景需求。</p>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 rounded-xl p-8">
                <h3 class="text-2xl font-bold mb-6 text-center">传统方案 vs SpringAI方案对比</h3>
                <div class="overflow-x-auto">
                    <table class="compare-table w-full">
                        <thead>
                            <tr>
                                <th>能力</th>
                                <th>传统方案</th>
                                <th>SpringAI方案</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>意图识别</td>
                                <td>关键词匹配（50%准确率）</td>
                                <td>语义理解（95%准确率）</td>
                            </tr>
                            <tr>
                                <td>开发周期</td>
                                <td>2周</td>
                                <td>2天</td>
                            </tr>
                            <tr>
                                <td>维护成本</td>
                                <td>高</td>
                                <td>低</td>
                            </tr>
                            <tr>
                                <td>可扩展性</td>
                                <td>差</td>
                                <td>优秀</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Case Study Section -->
    <section id="case-study" class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">实战案例</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">智能客服系统改造</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">从规则引擎到SpringAI的演进之路</p>
            </div>

            <div class="grid md:grid-cols-2 gap-10 mb-20">
                <div>
                    <h3 class="text-2xl font-bold mb-6">3.1 改造前：规则引擎的困境</h3>
                    <div class="code-block mb-6">
                        <div class="code-lang">Java</div>
                        <pre><code>// 传统规则引擎实现
public String handleRequest(String input) {
    if (input.contains("登录")) {
        return "请访问登录页面...";
    }
    if (input.contains("订单")) {
        return "请提供订单号...";
    }
    return "抱歉，我不明白您的意思";
}</code></pre>
                    </div>
                    <div class="highlight-box p-6 rounded-lg">
                        <h4 class="text-lg font-semibold mb-3">痛点分析：</h4>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                <span>新增需求要不断添加if-else</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                <span>无法理解用户真实意图</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                <span>处理不了复杂问询</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div>
                    <h3 class="text-2xl font-bold mb-6">3.2 SpringAI改造方案</h3>
                    
                    <div class="mb-8">
                        <h4 class="text-lg font-semibold mb-3">第一步：添加依赖</h4>
                        <div class="code-block">
                            <div class="code-lang">XML</div>
                            <pre><code>&lt;dependency&gt;
    &lt;groupId&gt;org.springframework.ai&lt;/groupId&gt;
    &lt;artifactId&gt;spring-ai-openai-spring-boot-starter&lt;/artifactId&gt;
    &lt;version&gt;0.8.1&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                        </div>
                    </div>

                    <div class="mb-8">
                        <h4 class="text-lg font-semibold mb-3">第二步：配置API密钥</h4>
                        <div class="code-block">
                            <div class="code-lang">YAML</div>
                            <pre><code>spring:
  ai:
    openai:
      api-key: ${OPENAI_API_KEY}
      chat:
        model: gpt-4-turbo</code></pre>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-10 mb-10">
                <div>
                    <h4 class="text-lg font-semibold mb-3">第三步：实现智能对话</h4>
                    <div class="code-block mb-6">
                        <div class="code-lang">Java</div>
                        <pre><code>@Service
public class AiCustomerService {
    private final ChatClient chatClient;

    public AiCustomerService(ChatClient chatClient) {
        this.chatClient = chatClient;
    }

    public String handleQuery(String userInput) {
        // 构建带上下文的prompt
        String prompt = """
            你是一个电商客服专家，请用中文回答用户问题。
            当前系统状态：
            - 用户已登录
            - 最近订单：OD123456（已发货）
            
            用户问题：%s
            """.formatted(userInput);

        // 调用AI模型
        return chatClient.call(prompt);
    }
}</code></pre>
                    </div>
                </div>

                <div>
                    <h4 class="text-lg font-semibold mb-3">第四步：控制器接入</h4>
                    <div class="code-block mb-6">
                        <div class="code-lang">Java</div>
                        <pre><code>@RestController
public class CustomerController {
    private final AiCustomerService aiService;

    @PostMapping("/chat")
    public String chat(@RequestBody String message) {
        return aiService.handleQuery(message);
    }
}</code></pre>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-8 shadow-sm">
                <h3 class="text-2xl font-bold mb-6 text-center">3.3 效果对比</h3>
                <div class="overflow-x-auto">
                    <table class="compare-table w-full">
                        <thead>
                            <tr>
                                <th>测试用例</th>
                                <th>传统方案响应</th>
                                <th>SpringAI响应</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>"我订单到哪了？"</td>
                                <td>"请提供订单号"</td>
                                <td>"您的订单OD123456已发货，预计明天送达"</td>
                            </tr>
                            <tr>
                                <td>"我要退货"</td>
                                <td>"请先登录"</td>
                                <td>"请问您要退哪个订单？"</td>
                            </tr>
                            <tr>
                                <td>"登录不了，密码错误"</td>
                                <td>"请访问登录页面"</td>
                                <td>"建议您尝试找回密码，需要帮您跳转吗？"</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Applications Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">更多可能</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">SpringAI的更多应用场景</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">超越客服系统的无限可能性</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mb-20">
                <div class="feature-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:border-blue-500">
                    <div class="bg-blue-100 p-4 rounded-lg inline-block mb-4">
                        <i class="fas fa-code text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能代码生成</h3>
                    <p class="text-gray-600 mb-4">根据自然语言描述自动生成高质量代码，提升开发效率。</p>
                    <div class="code-block">
                        <div class="code-lang">Java</div>
                        <pre class="text-xs"><code>@PostMapping("/generate")
public String generateCode(@RequestBody String requirement) {
    return codeClient.call("""
        根据以下需求生成Java代码：
        %s
        """.formatted(requirement));
}</code></pre>
                    </div>
                </div>

                <div class="feature-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:border-green-500">
                    <div class="bg-green-100 p-4 rounded-lg inline-block mb-4">
                        <i class="fas fa-file-alt text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">文档自动生成</h3>
                    <p class="text-gray-600 mb-4">为代码自动生成清晰的技术文档，保持文档与代码同步。</p>
                    <div class="code-block">
                        <div class="code-lang">Java</div>
                        <pre class="text-xs"><code>public String generateApiDoc(String code) {
    return docClient.call("""
        为以下Java代码生成API文档：
        %s
        """.formatted(code));
}</code></pre>
                    </div>
                </div>

                <div class="feature-card bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:border-purple-500">
                    <div class="bg-purple-100 p-4 rounded-lg inline-block mb-4">
                        <i class="fas fa-chart-pie text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据分析与决策</h3>
                    <p class="text-gray-600 mb-4">从数据中提取洞察，辅助业务决策制定。</p>
                    <div class="code-block">
                        <div class="code-lang">Java</div>
                        <pre class="text-xs"><code>public String analyzeSalesData(String csvData) {
    return analysisClient.call("""
        分析以下销售数据，给出改进建议：
        %s
        """.formatted(csvData));
}</code></pre>
                    </div>
                </div>
            </div>

            <div class="mb-16 flex justify-center">
                <div class="w-full max-w-4xl">
                    <div class="mermaid">
                        graph TD
                            A[SpringAI核心功能] --> B[自然语言处理]
                            A --> C[内容生成]
                            A --> D[智能决策]
                            A --> E[多模型支持]
                            
                            B --> F[智能客服]
                            B --> G[语义搜索]
                            B --> H[情感分析]
                            
                            C --> I[代码生成]
                            C --> J[文档生成]
                            C --> K[内容创作]
                            
                            D --> L[商业决策]
                            D --> M[风险预测]
                            D --> N[个性化推荐]
                            
                            E --> O[OpenAI]
                            E --> P[Azure AI]
                            E --> Q[本地模型]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">核心优势</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">为什么选择SpringAI？</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Spring生态与AI能力的完美结合</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mb-20">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-blue-600 text-4xl mb-4">
                        <i class="fas fa-box-open"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">开箱即用</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>无需复杂配置</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>统一API接口</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>支持主流AI模型</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-purple-600 text-4xl mb-4">
                        <i class="fas fa-puzzle-piece"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">灵活扩展</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>自定义Prompt模板</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>支持本地模型</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>插件式架构</span>
                        </li>
                    </ul>
                </div>

                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="text-green-600 text-4xl mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">企业级支持</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>Spring官方维护</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>完善文档和社区</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>生产环境验证</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Best Practices Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">最佳实践</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">SpringAI最佳实践指南</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">充分发挥SpringAI潜力的实用技巧</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-2xl font-bold mb-6">6.1 Prompt设计技巧</h3>
                    <div class="space-y-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-user-tie"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">明确角色</h4>
                                    <p class="text-gray-600 text-sm">定义AI的身份，如"你是一个电商客服专家"</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-info-circle"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">提供上下文</h4>
                                    <p class="text-gray-600 text-sm">让AI更懂业务，如"当前用户已登录，最近订单状态..."</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-align-left"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">限制输出格式</h4>
                                    <p class="text-gray-600 text-sm">方便后续处理，如"请用JSON格式返回结果"</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-2xl font-bold mb-6">6.2 性能优化</h3>
                    <div class="space-y-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-database"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">缓存常用结果</h4>
                                    <p class="text-gray-600 text-sm">减少API调用，降低成本和延迟</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-red-100 text-red-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-layer-group"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">批量处理请求</h4>
                                    <p class="text-gray-600 text-sm">提高吞吐量，优化资源利用</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">异步调用</h4>
                                    <p class="text-gray-600 text-sm">避免阻塞主线程，提高响应速度</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h3 class="text-2xl font-bold mb-6">6.3 安全防护</h3>
                    <div class="space-y-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-green-100 text-green-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-filter"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">输入校验</h4>
                                    <p class="text-gray-600 text-sm">防止Prompt注入攻击</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-eye-slash"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">输出过滤</h4>
                                    <p class="text-gray-600 text-sm">屏蔽敏感信息，保护隐私</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-start">
                                <div class="bg-red-100 text-red-600 p-2 rounded-lg mr-4">
                                    <i class="fas fa-lock"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">访问控制</h4>
                                    <p class="text-gray-600 text-sm">限制API调用频率，防止滥用</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="hero-bg text-white py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">准备好将AI集成到你的Spring应用了吗？</h2>
            <p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">SpringAI让AI集成变得前所未有的简单，立即开始你的智能应用之旅</p>
            <div class="flex justify-center space-x-4">
                <a href="https://spring.io/projects/spring-ai" target="_blank" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-medium hover:bg-blue-50 transition duration-300">
                    官方文档 <i class="fas fa-external-link-alt ml-2"></i>
                </a>
                <a href="http://www.yuque.com/jtostring" target="_blank" class="border-2 border-white px-8 py-4 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition duration-300">
                    更多技术文章 <i class="fas fa-book-open ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-sm">前沿技术探索与实践分享</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-blue-400 hover:text-blue-300 transition duration-300">
                        <i class="fas fa-globe mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
                <p>© 2024 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```